﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #test {
            padding: 2px;
            margin: 0 auto;
            width: 560px;
            height: 32px;
            position: relative;
            border: 1px solid #777;
            text-align: center;
            color: #ff3300;
            font-family: "微软雅黑";
            font-size: 24px;
            font-weight: bold;
        }

            #test span {
                position: absolute;
                top: 0;
                left: 45%;
            }

            #test .Schedule {
                background-color: #5691d0;
                width: 0px;
                height: 32px;
            }
    </style>
    <script src="https://raw.githubusercontent.com/ZhengSnow/demo/master/jquery-1.7.1.js"></script>
    <script src="https://raw.githubusercontent.com/ZhengSnow/demo/master/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            new downloadSchedule($("#test"), {   // 调用代码在jQuery ready 中完成
                callback: function () {
                    alert("OK！");
                }
            }).Init();
        });

        //定义下载进度属性
        function downloadSchedule(element, options) {
            this.element = element;//节点
            this.options = options;//参数
            this.tid = null;//控件id
            this.tnum = 10;//10毫秒执行一次
            this.precent = 1;//百分比
            this.currentWidth = 0;//当前宽度
        };
        var Proess = downloadSchedule.prototype;//继承原型对象
        //获得节点值
        Proess.getElement = function () {
            return this.element;
        };
        //获得参数值
        Proess.getOptions = function () {
            return this.options;
        };
        //加载进度条事件
        Proess.Init = function () {
            this._fnProcessHandler();
        };
        //回调事件，当进度条小于100%10毫秒执行一次
        Proess._fnProcessHandler = function () {
            var that = this;
            var cb = this.getOptions()["callback"];
            this._setProcessIncWidth(this.currentWidth = this.currentWidth + this._getIncrementNum());
            this._setPrecentText(this.precent.toString());
            if (this.precent < 100) {
                this.tid = window.setTimeout(function () {
                    that._fnProcessHandler.call(that);
                }, this.tnum);
            }
            else {
                this._resetTimeout();
                $.isFunction(cb) && cb();
            }
            this.precent = this.precent + 1;
        };
        //获得当前宽度
        Proess._getIncrementNum = function () {
            return this.getElement().width() / 100;
        };
        //设置百分比咯
        Proess._setPrecentText = function (precent) {
            this.getElement().find("span").text(precent + "%");
        };
        //定时设置进度条宽度
        Proess._setProcessIncWidth = function (width) {
            this.getElement().find(".Schedule").css("width", width + "px");
        };
        Proess._resetTimeout = function () {
            window.clearTimeout(this.tid);
            this.tid = null;
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="test">
            <span></span>
            <div class="Schedule"></div>
        </div>
    </form>
</body>
</html>
